<template>
  <div>
    <div id="top-status-withdrawCash">
      <span class="time" style="float: left">{{time}}</span>
      <img src="@/assets/电 90%.png"
           style="float: right; width: 30px; height: 30px; margin-top: -6px; margin-right: 38px;">
      <img src="@/assets/280-手机网络.png"
           style="float: right; width: 19px; height: 19px; margin-top: -1px; margin-right: 6px;">
      <img src="@/assets/手机信号.png"
           style="float: right; width: 15px; height: 15px; margin-top: 1px; margin-right: 13px;">
    </div>
    <div id="bottom">
      <div style="width: 100%; height: 40px; background-color: #FFFFFF; margin-top: 50px;">
        <img src="../../../assets/向左箭头(白).png" style="width: 25px; height: 25px; float: left;margin: 6px 0 0 15px" @click="gopersonalUser">
        <p style="float: left; margin: 7px 0 0 140px;font-weight: bolder;font-size : 13pt;">提现</p>
      </div>
      <div style="width: 100%;height: 140px;background-color: #FFFFFF;margin-top: 10px">
        <p style="width: 100%; float: left; margin: 15px 0 0 25px;font-weight: bolder;font-size : 13pt;text-align: left">可提现金额</p>
        <p style="float: left; margin: 15px 0 0 25px;font-weight: bolder;font-size : 35pt;">$ {{value}}</p>
    </div>
      <div style="width: 100%;height: 200px;background-color: #FFFFFF;margin-top: 10px">
        <p style="width: 100%; float: left; margin: 15px 0 0 25px;font-weight: bolder;font-size : 13pt;text-align: left">请输入提现金额</p>
        <p style="width: 70px; float: right;font-size : 11pt;text-align: center;
        border: 2px solid #B1BCC0;border-radius: 10px;margin: -20px 25px 0 0;" @click="AssetsQuan">全部提现</p>
        <div style="width: 100%;height: 70px;color: #B1BCC0; float: left">
          <p style="float: left; margin: 30px 0 0 25px;font-weight: bolder;font-size : 45pt;">$</p>
          <van-form validate-first>
            <van-field
                v-model="value1"
                style="width: 300px;height: 60px;font-size: 40pt;margin-top: 25px"
            />
          </van-form>
        </div>
      </div>
      <div style="width: 100%;height: 140px;background-color: #FFFFFF;margin-top: 10px">
        <p style="width: 100%; float: left; margin: 15px 0 0 25px;font-weight: bolder;
        font-size : 13pt;text-align: left">提现方式</p>
        <div style="width: 100%; height: 100px;float: left">
          <ul style="width: 100%;height: 100px;float: left; margin: 18px 0 0 25px">
            <li style="width: 60px; height: 60px; float: left">
              <img :src="userPurses.bankIcon"
                   alt="网络异常" style="width: 50px;height: 50px;float: left;margin-top: 5px;margin-left: 5px">
            </li>
            <p
                style="width: 112px;height: 20px;float: left;margin: 18px 0 0 10px;font-size: 12pt;text-align: left">{{userPurses.bankName}}:</p>
            <img src="@/assets/向右箭头.png"
                 style="width: 25px; height: 30px;float: right;margin: 15px 45px 0 0">
          </ul>
        </div>
      </div>
      <div style="margin-top: 150px;width: 100%;height: 60px;padding-top:24px;background-color: #FFFFFF">
        <van-button round block type="info" @click="onFailed"
                    style="color: #FFFFFF;font-size: 13pt; width: 380px;height: 40px;
                    margin-left: 5px;background-color: #4EA9CB">立即提现</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {userUpdateTotalAssetsQuan,userPersonalUser,updateAssetsId} from "@/components/api/user/user";
import {walletfindAll} from '@/components/api/wallet/wallet';
import Vue from 'vue';
import {Tab, Tabs} from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
export default {
  components: {
  },
  data() {
    return {
      time: '',
      value:'',
      value1:0,
      userPurse: [],
      userPurses:{},
    };
  },
  methods: {
    walletfindall() {
      var user = JSON.parse(window.localStorage.getItem("personalUser"));
      if (user == null) {
        this.$router.push({
          path: '/personalUser',
        })
        return;
      }
      walletfindAll(user.id).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.userPurse = res.data;
          this.userPurses=this.userPurse[0];
          console.log(res.data);
        } else {
          this.$message({
            message: "网络异常",
            type: 'error'
          });
        }
      })
    },
    list() {
      const id=JSON.parse(localStorage.getItem('personalUser')).id;
      userPersonalUser(id).then(response => {
        this.value=response.driverTotalAssets;
      })
    },
    AssetsQuan(){
      const id=JSON.parse(localStorage.getItem('personalUser')).id;
      userUpdateTotalAssetsQuan(id).then(response => {
        console.log(response);
        if (this.value!=0){
          if (response.data == 1){
            this.$message({
              message: "全部提现成功",
              type: 'success'
            });
          }else {
            this.$message({
              message: "网络异常，请重新尝试",
              type: 'error'
            });
          }
        }else if (this.value==0){
          this.$message({
            message: "您的余额为0，无法提现",
            type: 'error'
          });
        }
        this.list();
      });
    },
    onFailed() {
      console.log(this.value1);
      const id=JSON.parse(localStorage.getItem('personalUser')).id;
      const assets=this.value;
      if (assets!=0){
        console.log(assets)
        if (this.value1==0 || this.value1==''){
          this.$message({
            message: "请填写您的提现金额",
            type: 'error'
          });
        }else if (assets > this.value1){
          updateAssetsId(this.value1,id).then(response =>{
            console.log(response)
            if (response.data == 1){
              this.$message({
                message: "提现成功",
                type: 'success'
              });
            }else if (response.data == 0){
              this.$message({
                message: "网络异常，请重新尝试",
                type: 'error'
              });
            }
            this.value1=0;
            this.list();
          })
        }else if (assets < this.value1){
          this.$message({
            message: "提现金额不能大于余额",
            type: 'error'
          });
        }
      }else if (assets==0){
        this.$message({
          message: "您的余额为0，无法提现",
          type: 'error'
        });
      }
    },
    format(percentage) {
      return percentage === 100 ? ' ' : ` `;
    },
    updateTime() {
      setInterval(() => {
        const now = new Date();
        const timeString = now.toLocaleTimeString();
        this.time = timeString;
      }, 1000);
    },
    // 模拟信号、网络、电量状态数据
    setSignalStatus() {
      const signalStatus = 'full';  // 例如 'full','medium', 'low'

      // 根据状态设置相应的图标样式或显示不同的图标
      if (signalStatus === 'full') {
        // 设置信号满格的样式
      } else if (signalStatus ==='medium') {
        // 设置信号中等的样式
      } else {
        // 设置信号低的样式
      }
    },
    gopersonalUser(){
      this.$router.push("/personalUser")
    },
  },
  created() {
    this.updateTime();
    this.setSignalStatus();
    this.list();
    this.walletfindall();
  }
};
</script>

<style>
#top-status-withdrawCash {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #F8F8F8;
  padding: 10px;
  font-weight: bolder;
  color: #171010;
  padding-top: 15px;
  float: left;
}
#bottom{
  width: 100%;
  height: 798px;
  float: left;
  margin-top: 10px;
  background-color: #F8F8F8;
}
</style>